<template>
	<scroll-view class="list-view" scroll-y="true" lower-threshold="200" style="height:100vh" @scrolltolower="_lower"
	 enable-back-to-top='true'>
		<view class="weui-grids">
			<block v-for="(item,index) in top250" :key="index">
				<view class="weui-grid video-grid_item" @click="_itemClick(item.subject)">
					<image class="video-img" webp="true" :src="replaceUrl(item.image)"></image>
					<view class="single-line-text ">{{item.title}}</view>
				</view>
			</block>
		</view>
		<view class="load-more-hint" v-if="loadMore==false&&top250">
			<view class="load-more-hint_text">上拉加载更多</view>
		</view>
		<view v-if="loadMore" class="weui-loadmore">
			<view class="weui-loading"></view>
			<view class="weui-loadmore__tips">正在加载</view>
		</view>
	</scroll-view>
</template>

<script>
	import {
		movieDetail
	} from '@/router.js'
	export default {
		data() {
			return {
				current: 0,
				top250: [],
				loadMore: false,
				lower_flag: false
			}
		},
		onLoad: function(options) {
			this.get_movie250(this.current)
		},
		methods: {
			replaceUrl(image_url) {
				if (image_url == null)
					return image_url
				// image_url = image_url.replace('https://img3.doubanio.com/', 'https://zhaoyj.work/douban/')
				// image_url = image_url.replace('https://img9.doubanio.com/', 'https://zhaoyj.work/douban/')
				// image_url = image_url.replace('https://img1.doubanio.com/', 'https://zhaoyj.work/douban/')
        image_url = image_url.replace('https:', 'https://images.weserv.nl/?url=https:')
        return image_url
			},
			// 获取top250的电影
			get_movie250(cur_num) {
				uni.showLoading({
					title: '加载中',
				})
				var next_num = cur_num + 1
				var start_num = cur_num * 10
				var _this = this
				uniCloud.callFunction({
					name: 'database',
          data: {
            collection: 'movie',
            top250:true,
            type:'limit',
            start:start_num
          },
					success: res => {
						uni.hideLoading()
						console.log(res)
						var new_data = res.result.data
						var old_subjects = _this.top250
						console.log('old_subjects', old_subjects)
						if (old_subjects.length > 0) {
							var new_subjects = old_subjects.concat(new_data)
							console.log('new_subjects', new_subjects)
							new_data = new_subjects
						}
						this.current = next_num
						this.loadMore = false
						this.top250 = new_data
					},
					fail: console.error
				});
			},
			//九宫格点击事件
			_itemClick(subject) {
				subject = subject.replace('https://movie.douban.com/subject/', '').replace('/', '')
				uni.navigateTo({
					url: movieDetail + `?subject=${subject}`,
				})
			},
			//滑动到底
			_lower: function(e) {
				console.log('到达底部')
				//先显示加载
				this.loadMore = true
				this.lower_flag = false
				this.get_movie250(this.current)
			},
		}
	}
</script>

<style>
	.list-view {
		height: 100%;
	}

	.video-grid_item {
		width: 33.3%;
		text-align: center;
		padding: 5px;
	}

	.video-img {
		width: 110px;
		height: 162px;
	}

	.load-more-hint {
		height: 30%;
		width: 100vw;
		text-align: center;
	}

	.load-more-hint_text {
		margin-top: 30px;
		width: 100%;
	}
</style>
